<template>
  <view class="content">
    <view class="body">
      <view class="option" @click="showMore">
        <label class="label">{{ options.title }}</label>
        <text class="text">{{ clickedPrimary ? " ﹀ " : " 〉" }}</text>
      </view>
      <view v-for="(item, index) in options.options" :key="index">
        <secondary-options
          :options="item"
          :clickedPrimary="clickedPrimary"
        ></secondary-options>
      </view>
    </view>
  </view>
</template>

<script>
import SecondaryOptions from "@/components/introduce/SecondaryOptions.vue";
export default {
  name: "options",
  props: {
    options: Object,
    // clickedPrimary: Boolean,
  },
  components: {
    SecondaryOptions,
  },
  mounted() {
    // console.log(this.options);
  },
  data() {
    return {
      clickedPrimary: false,
    };
  },
  methods: {
    showMore() {
      this.clickedPrimary = !this.clickedPrimary;
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  .body {
    border-radius: 20rpx;
    border-bottom: 6rpx solid aliceblue;
    // display: flex;
    // align-items: center;
    background-color: #fff;
    padding: 0 20rpx;
    .option {
      height: 8vh;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .label {
        padding-left: 10rpx;
        font-size: 34rpx;
        color: #3b3b3b;
      }
      .text {
        font-size: 28rpx;
        color: #888888;
      }
    }
  }
}
</style>